<template>
  <div class="bbqm-container">
    <div class="banner-background"></div>
    <div class="content-wrapper">
      <div class="page-title">
        <h2>宝宝起名</h2>
        <div class="title-decoration">
          <span class="decoration-line"></span>
          <span class="heart-icon">✦</span>
          <span class="decoration-line"></span>
        </div>
        <p class="subtitle">结合姓氏、出生信息与偏好，智能生成合适的名字建议</p>
      </div>

      <div class="form-grid">
        <div class="form-left">
          <div class="form-group">
            <label class="block text-sm text-gray-700">姓氏（必填）</label>
            <input v-model="surname" class="mt-1 block w-full border rounded px-3 py-2" placeholder="请输入姓氏，例如：张" />
          </div>

          <div class="form-group mt-3">
            <label class="block text-sm text-gray-700">性别</label>
            <div class="mt-1 flex items-center space-x-4">
              <label class="inline-flex items-center"><input type="radio" value="male" v-model="gender" class="mr-2" /> 男</label>
              <label class="inline-flex items-center"><input type="radio" value="female" v-model="gender" class="mr-2" /> 女</label>
              <label class="inline-flex items-center"><input type="radio" value="unknown" v-model="gender" class="mr-2" /> 不限</label>
            </div>
          </div>

          <div class="form-group mt-3">
            <label class="block text-sm text-gray-700">期望字数</label>
            <select v-model.number="charCount" class="mt-1 block w-full border rounded px-3 py-2">
              <option :value="1">1 字名（单字）</option>
              <option :value="2">2 字名（常用）</option>
            </select>
          </div>

          <div class="form-group mt-3">
            <label class="block text-sm text-gray-700">喜用字/避讳字（可选）</label>
            <input v-model="preferredChars" class="mt-1 block w-full border rounded px-3 py-2" placeholder="例如：晨, 宇；或填写避讳字用逗号分隔" />
          </div>

          <div class="form-group mt-3">
            <label class="block text-sm text-gray-700">家庭备注 / 取名风格</label>
            <input v-model="notes" class="mt-1 block w-full border rounded px-3 py-2" placeholder="例如：朴素、诗意、洋气、五行补火等" />
          </div>
        </div>

        <div class="form-right">
          <div class="form-group">
            <label class="block text-sm text-gray-700">日期类型</label>
            <div class="mt-1 flex items-center space-x-4">
              <label class="inline-flex items-center"><input type="radio" value="solar" v-model="dateType" class="mr-2" /> 阳历</label>
              <label class="inline-flex items-center"><input type="radio" value="lunar" v-model="dateType" class="mr-2" /> 农历</label>
            </div>
          </div>

          <div class="form-group mt-3">
            <label class="block text-sm text-gray-700">出生日期</label>
            <input type="date" v-model="birthDate" class="mt-1 block w-full border rounded px-3 py-2" />
          </div>

          <div class="form-group mt-3">
            <label class="block text-sm text-gray-700">时辰（可选）</label>
            <select v-model="timeIndex" class="mt-1 block w-full border rounded px-3 py-2">
              <option v-for="opt in timeOptions" :key="opt.value" :value="opt.value">{{ opt.label }}</option>
            </select>
          </div>

          <div v-if="dateType === 'lunar'" class="form-group mt-3">
            <label class="inline-flex items-center"><input type="checkbox" v-model="isLeapMonth" class="mr-2" /> 闰月</label>
          </div>

          <div class="form-group mt-3">
            <label class="block text-sm text-gray-700">要生成的候选数量</label>
            <input type="number" min="3" max="30" v-model.number="candidateCount" class="mt-1 block w-full border rounded px-3 py-2" />
          </div>
        </div>
      </div>

      <div class="mt-4">
        <button @click="generateNames" :disabled="loading" class="generate-btn inline-flex items-center px-4 py-2 bg-indigo-600 hover:bg-indigo-700 text-white rounded">
          <i class="match-icon mr-2">✦</i>
          <span v-if="!loading">生成起名建议</span>
          <span v-else>生成中...</span>
        </button>
      </div>
    </div>
  </div>
</template>

<script>
definePageMeta({ middleware: 'admin-access' })
export default {
  name: 'BbqmPage',
  data() {
    return {
      surname: '',
      gender: 'unknown',
      charCount: 2,
      preferredChars: '',
      notes: '',
      dateType: 'solar',
      birthDate: '',
      timeIndex: '6',
      isLeapMonth: false,
      candidateCount: 12,
      loading: false,
      timeOptions: [
        { label: '早子时 (00:00-1:00)', value: '0' },
        { label: '丑时 (1:00-3:00)', value: '1' },
        { label: '寅时 (3:00-5:00)', value: '2' },
        { label: '卯时 (5:00-7:00)', value: '3' },
        { label: '辰时 (7:00-9:00)', value: '4' },
        { label: '巳时 (9:00-11:00)', value: '5' },
        { label: '午时 (11:00-13:00)', value: '6' },
        { label: '未时 (13:00-15:00)', value: '7' },
        { label: '申时 (15:00-17:00)', value: '8' },
        { label: '酉时 (17:00-19:00)', value: '9' },
        { label: '戌时 (19:00-21:00)', value: '10' },
        { label: '亥时 (21:00-23:00)', value: '11' },
        { label: '晚子时 (23:00-00:00)', value: '12' }
      ]
    }
  },
  methods: {
    async generateNames() {
      if (!this.surname || !this.surname.trim()) {
        alert('请输入姓氏');
        return;
      }

      this.loading = true;

      try {
        // 组装用于 AI 的描述
        let prompt = '请作为中文起名专家，为新生儿生成名字建议。以下是要求：';
        prompt += `姓氏：${this.surname}。`;
        prompt += `性别：${this.gender === 'unknown' ? '不限' : (this.gender === 'male' ? '男' : '女')}。`;
        prompt += `期望字数：${this.charCount}。`;
        if (this.preferredChars) prompt += `喜用/避讳字：${this.preferredChars}。`;
        if (this.notes) prompt += `取名风格或备注：${this.notes}。`;
        prompt += `需生成候选数量：${this.candidateCount}。`;
        prompt += `出生信息：日期类型=${this.dateType === 'solar' ? '阳历' : '农历'}，出生日期=${this.birthDate || '未知'}，时辰=${this.timeIndex || '未知'}${this.dateType === 'lunar' && this.isLeapMonth ? '（闰月）' : ''}。`;
        prompt += '请在每个候选后说明2-3句原因（含字义、音律、五行或文化寓意），并按优先顺序排序。';

        // 使用 lin/util/data-transfer 保存描述并通过 data_id 跳转到聊天页
        import('@/lin/util/data-transfer').then(({ saveData, generateUniqueId }) => {
          const id = generateUniqueId();
          const ok = saveData(id, prompt);
          if (ok) {
            window.open(`/ai-tools/chat?data_id=${id}`);
          } else {
            alert('保存数据失败');
          }
        }).catch(e => {
          console.error(e);
          try {
            const encoded = encodeURIComponent(prompt);
            window.open(`/ai-tools/chat?user_input=${encoded}`);
          } catch (err) {
            alert('跳转到聊天页失败');
          }
        });

      } catch (err) {
        console.error('生成起名信息时出错：', err);
        alert('生成失败');
      } finally {
        this.loading = false;
      }
    }
  }
}
</script>

<style scoped>
.bbqm-container { padding: 24px }
.banner-background { height: 120px; background: linear-gradient(90deg,#e6f0ff,#f7fbff); border-radius:8px; margin-bottom:16px }
.content-wrapper { max-width: 900px; margin: -60px auto 0; background:#fff; padding:24px; border-radius:8px; box-shadow:0 6px 18px rgba(0,0,0,0.06) }
.page-title h2 { margin:0 }
.title-decoration { display:flex; align-items:center; gap:8px; margin-top:8px }
.decoration-line { flex:1; height:1px; background:#eee }
.heart-icon { color:#6366f1 }
.subtitle { color:#888; margin-top:8px }
.form-grid { display:flex; gap:16px; margin-top:18px }
.form-left, .form-right { flex:1; background:#fafafa; padding:12px; border-radius:8px }
.generate-btn { margin-top:18px }
</style>
